<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1. 准备一个具有宽高的容器 -->
  <div id="main" style="width: 600px; height: 400px"></div>
  <div id="main1" style="width: 800px;height: 400px"></div>
  <script src="./lib/echarts.min.js"></script>
  <script>
    function barChart() {
      // 3. 初始化一个echarts的实例对象
      const myChart = echarts.init(document.querySelector('#main'))
      // 4. 准备对应的配置项
      const option = {
        title: {  // 标题组件
          text: 'ECharts 入门示例' // 主标题
        },
        tooltip: {
          // show: false
        }, //提示框组件
        legend: {  // 图例组件
          // data: ['销量1', '产量1']
        },
        xAxis: { //  x 轴
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {}, // y轴
        series: [ // 系列数据
          {
            name: '销量', // 系列名称
            type: 'bar', // 决定图表的类型 -> 柱状图
            data: [5, 20, 46, 10, 10, 20] // 对应的是x轴的每一项数据
          },
          {
            name: '产量', // 系列名称
            type: 'bar', // 决定图表的类型 -> 柱状图
            data: [20, 50, 70, 30, 20, 30] // 对应的是x轴的每一项数据
          }
        ]
      };
      // 5.将实例对象和配置项建立关联
      myChart.setOption(option)
    }

    barChart()
    lineChart()
    // ----------------------------------折线图
    function lineChart() {
      const myChart = echarts.init(document.querySelector('#main1'))
      const option = {
        title: { // 标题组件
          text: '折线图',  // 主标题
          left: 'left'  // 居中位置
        },
        tooltip: {  // 提示组件
          trigger: 'axis' // 触发类型 axis 坐标轴触发  / item -> 自身项触发
        },
        legend: { // 图例组件
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {  // 直角坐标系网格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true // 是否包含刻度
        },
        toolbox: {  // 工具箱
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {  // x轴
          type: 'category',  // 离散的数据
          boundaryGap: false,
          data: ['星期一', '周二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { // y轴
          // type: 'value'
        },
        series: [ // 系列是数据
          {
            name: 'Email',
            type: 'line',
            // stack: 'Total', // 数据堆叠
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            // stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            // stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            // stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            // stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      myChart.setOption(option)
    }
  </script>
</body>

</html>